<template>
	<view class="page">
		<view class="input_area">
			<u--form :model="baseFormData" ref="valiForm" errorType="message" labelWidth="auto"
				:labelStyle="{ padding: '5px 0 ',fontWeight : '600', fontSize : '15px', width:'90px' }">
				<u-form-item prop="name" :borderBottom="true" label="持卡人" required>
					<u--input v-model="baseFormData.name" border="none" clearable placeholder="请输入持卡人姓名">
					</u--input>
				</u-form-item>
				<u-form-item prop="bankType" :borderBottom="true" label="开卡银行" required>
					<u--input v-model="baseFormData.bankType" border="none" clearable placeholder="请输入开卡银行">
					</u--input>
				</u-form-item>
				<u-form-item prop="open_bank" :borderBottom="true" label="开户行" required>
					<u--input v-model="baseFormData.open_bank" border="none" clearable placeholder="请输入开户行">
					</u--input>
				</u-form-item>
				<u-form-item prop="bank_number" :borderBottom="true" label="行号">
					<u--input v-model="baseFormData.bank_number" border="none" clearable placeholder="请输入行号">
					</u--input>
				</u-form-item>
				<u-form-item prop="no" :borderBottom="true" label="银行卡号" required>
					<u--input v-model="baseFormData.no" border="none" clearable placeholder="请输入银行卡号">
					</u--input>
				</u-form-item>
				<u-form-item prop="phone" label="手机号码" required>
					<u--input v-model="baseFormData.phone" type="number" border="none" clearable
						placeholder="请输入银行卡预留手机号" maxlength="11">
					</u--input>
				</u-form-item>
			</u--form>
		</view>
	</view>
	<fixed-button @touch="submit">提交</fixed-button>
</template>


<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { nextTick, reactive, ref, onMounted } from 'vue';
	import request from '@/utils/common/request/index';
	import { sleep } from '@/utils/common/index';

	let bankId = '';
	onLoad((option) => {
		if (option.id) {
			bankId = option.id;
			getDetail(bankId);
		}
		uni.setNavigationBarTitle({
			title: bankId ? '修改银行卡' : '添加银行卡'
		});
	});

	// * 表单数据
	const valiForm = ref(null);
	let baseFormData = reactive({
		name: '',
		bankType: '',
		no: '',
		phone: '',
		open_bank:'',
		bank_number:''
	});
	// * 校验规则
	const rules = {
		name: [{
				required: true,
				message: '姓名不能为空',
				trigger: ['blur', 'change'],
			},
			{
				validator: (rule, value, callback) => {
					return value.trim() !== '';
				},
				message: '姓名格式错误',
			},
		],
		open_bank: [{
				required: true,
				message: '开户行不能为空',
				trigger: ['blur', 'change'],
			},
			{
				validator: (rule, value, callback) => {
					return value.trim() !== '';
				},
				message: '开户行名称格式错误',
			},
		],
		bankType: [{
				required: true,
				message: '开卡银行不能为空',
				trigger: ['blur', 'change'],
			},
			{
				validator: (rule, value, callback) => {
					return value.trim() !== '';
				},
				message: '开卡银行名称格式错误',
			},
		],
		no: [{
			required: true,
			message: '银行卡号不能为空',
			trigger: ['blur', 'change'],
		}],
		phone: [{
				required: true,
				message: '预留手机号不能为空',
				trigger: ['blur', 'change'],
			},
			{
				validator: (rule, value, callback) => {
					return uni.$u.test.mobile(value);
				},
				message: '预留手机号格式错误',
			},
		],
	};

	onMounted(() => {
		valiForm.value.setRules(rules);
	});

	// * 提交
	const submit = () => {
		valiForm.value.validate().then(() => {
			let reqData = {
				name: baseFormData.name,
				tel: baseFormData.phone,
				bank: baseFormData.bankType,
				bank_no: baseFormData.no,
				open_bank:baseFormData.open_bank,
				bank_number:baseFormData.bank_number
			};

			if (bankId) reqData.bank_id = bankId;
			request({
				url: bankId ? '/api/editcard' : '/api/addcard',
				method: 'POST',
				loadingTip: '处理中',
				data: reqData
			}).then(async () => {
				uni.showToast({
					title: bankId ? '修改成功' : '添加成功',
					icon: 'success',
					mask: true
				});
				await sleep();
				uni.navigateBack();
			})

		}).catch(err => {})
	}

	// * 根据id获取银行卡信息
	const getDetail = (id) => {
		request({
			url: '/api/bankdetail',
			loadingTip: '加载中',
			data: { bank_id: id },
		}).then(bank => {
			baseFormData.bankType = bank.bank;
			baseFormData.name = bank.name;
			baseFormData.no = bank.bank_no;
			baseFormData.phone = bank.tel;
			baseFormData.open_bank = bank.open_bank;
			baseFormData.bank_number = bank.bank_number;
			
		});
	};
</script>

<style lang="scss" scoped>
	.input_area {
		padding: 20rpx 20rpx 20rpx 25rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		::v-deep .u-form-item__body__right__message {
			margin-left: 95px !important;
		}
	}
</style>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>